@import 'mo/style/common';

#{$sidebar} {
    #{$collapse}__header {
        &__title {
            font-weight: 700;
            text-transform: uppercase;
        }
    }

    #{$folderTree} {
        #{$tree}__indent__guide {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        &:hover #{$tree}__indent__guide {
            opacity: 1;
        }
    }
}

#{$folderTree} {
    min-height: 100%;
    padding-bottom: 22px;

    &--editable {
        background: rgba(0, 0, 0, 0.3);

        #{$folderTree}--input {
            background: var(--input-background);
            border: 1px solid var(--list-focusOutline);
            color: var(--input-foreground);
            font-family: inherit;
            font-size: 13px;
            height: 20px;
            left: -2px;
            margin: 0;
            outline: none;
            padding: 0;
            position: relative;
            width: 100%;

            &:focus,
            &:active {
                border-color: var(--list-focusOutline);
                outline: inherit;
            }

            &::selection {
                background: rgb(90, 126, 167);
            }

            &::placeholder {
                color: var(--input-placeholderForeground);
            }
        }
    }
}

#{$editorTree} {
    font-size: 13px;

    &__item {
        // keep same with tree node
        align-items: center;
        border: 1px solid transparent;
        cursor: pointer;
        display: flex;
        height: 22px;
        line-height: 22px;
        list-style: none;
        margin: 0;
        outline: 0;
        padding-left: 16px;
        user-select: none;
        white-space: nowrap;

        &--active {
            // 这里的 inactive 是相对于 focus 的 active 来说的，是相对的 inactive
            background-color: var(--list-inactiveSelectionBackground);

            #{$editorTree}__close {
                color: var(--icon-foreground);
                opacity: 1;
            }
        }

        &:hover {
            &:not(#{$editorTree}__item--active) {
                background-color: var(--list-hoverBackground);
            }

            #{$editorTree}__close {
                opacity: 1;
            }
        }

        &:focus {
            background: var(--list-activeSelectionBackground);
            border-color: var(--list-focusOutline);
            color: #fff;
        }

        &__fileName {
            flex-basis: auto;
            margin-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre;
        }

        &__filePath {
            flex: 1;
            font-size: 0.9em;
            margin-left: 5px;
            opacity: 0.8;
            overflow: hidden;
            padding-top: 2px;
            text-overflow: ellipsis;
            white-space: pre;
        }
    }

    &__group {
        align-items: center;
        display: flex;
        font-size: 11px;
        height: 22px;
        line-height: 22px;
        padding-left: 16px;
        user-select: none;

        &:hover {
            background-color: var(--list-hoverBackground);

            #{$toolBar} {
                opacity: 1;
            }
        }

        #{$toolBar} {
            margin-left: auto;
            opacity: 0;

            .codicon {
                color: var(--activityBar-inactiveForeground);

                &:hover {
                    color: var(--activityBar-activeBorder);
                }
            }
        }
    }

    &__close {
        color: var(--icon-foreground);
        margin-right: 2px;
        opacity: 0;

        &:hover {
            opacity: 1;
        }
    }

    &__file[class*='codicon-'] {
        flex-shrink: 0;
        height: 22px;
        line-height: 23px;
        width: 16px;
    }
}
